תצורת TypeScript: שליטה באפשרויות קומפילציה של TSConfig

קובץ tsconfig.json הוא הלב של כל פרויקט TypeScript. הוא מכתיב כיצד מהדר TypeScript (tsc) הופך את קבצי ה-.ts שלך ל-JavaScript. קובץ tsconfig.json מוגדר היטב הוא חיוני לשמירה על איכות הקוד, הבטחת תאימות בין סביבות שונות ואופטימיזציה של תהליך הבנייה. מדריך מקיף זה מתעמק באפשרויות tsconfig.json מתקדמות, ומעצים אותך לכוונן את פרויקטי ה-TypeScript שלך לביצועים ויכולת תחזוקה מיטביים.

הבנת היסודות: מדוע TSConfig חשוב

לפני שנצלול לאפשרויות המתקדמות, נסכם מדוע tsconfig.json כל כך חשוב:

• שליטה בקומפילציה: הוא מציין אילו קבצים צריכים להיכלל בפרויקט שלך וכיצד יש לקמפל אותם.
• בדיקת טיפוסים: הוא מגדיר את הכללים והקפדנות של בדיקת הטיפוסים, ועוזר לך לזהות שגיאות מוקדם במחזור הפיתוח.
• שליטה בפלט: הוא קובע את גרסת ה-JavaScript היעד, מערכת המודולים וספריית הפלט.
• שילוב IDE: הוא מספק מידע רב ערך לסביבות פיתוח משולבות (כגון VS Code, WebStorm וכו') עבור תכונות כגון השלמת קוד, הדגשת שגיאות וארגון מחדש.

ללא קובץ tsconfig.json, מהדר TypeScript ישתמש בהגדרות ברירת מחדל, שאולי לא יתאימו לכל הפרויקטים. זה עלול להוביל להתנהגות בלתי צפויה, בעיות תאימות וחוויית פיתוח פחות מאידיאלית.

יצירת TSConfig שלך: התחלה מהירה

כדי ליצור קובץ tsconfig.json, פשוט הפעל את הפקודה הבאה בספריית השורש של הפרויקט שלך:

            tsc --init
            

              
                Copy
              
            
          

זה ייצור קובץ tsconfig.json בסיסי עם כמה אפשרויות נפוצות. לאחר מכן תוכל להתאים אישית קובץ זה כדי לעמוד בדרישות הספציפיות של הפרויקט שלך.

אפשרויות קומפילציה מרכזיות: סקירה מפורטת

קובץ tsconfig.json מכיל אובייקט compilerOptions, שבו אתה מגדיר את מהדר TypeScript. בואו נחקור כמה מהאפשרויות החשובות והנפוצות ביותר:

target

אפשרות זו מציינת את גרסת היעד של ECMAScript עבור קוד ה-JavaScript המהודר. זה קובע באילו תכונות JavaScript המהדר ישתמש, ומבטיח תאימות לסביבת היעד (למשל, דפדפנים, Node.js). ערכים נפוצים כוללים ES5, ES6 (ES2015), ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext. שימוש ב-ESNext יכוון לתכונות ECMAScript הנתמכות האחרונות.

דוגמה:

            "compilerOptions": {
  "target": "ES2020"
}
            

              
                Copy
              
            
          

תצורה זו תורה למהדר ליצור קוד JavaScript התואם ל-ECMAScript 2020.

module

אפשרות זו מציינת את מערכת המודולים שתשמש בקוד ה-JavaScript המהודר. ערכים נפוצים כוללים CommonJS, AMD, System, UMD, ES6 (ES2015), ES2020 ו-ESNext. הבחירה במערכת המודולים תלויה בסביבת היעד ובטוען המודולים בו נעשה שימוש (למשל, Node.js, Webpack, Browserify).

דוגמה:

            "compilerOptions": {
  "module": "CommonJS"
}
            

              
                Copy
              
            
          

תצורה זו מתאימה לפרויקטי Node.js, שבדרך כלל משתמשים במערכת המודולים CommonJS.

lib

אפשרות זו מציינת את קבוצת קבצי הספריות שיש לכלול בתהליך הקומפילציה. קבצי ספריות אלה מספקים הגדרות טיפוסים עבור ממשקי API מובנים של JavaScript וממשקי API של דפדפן. ערכים נפוצים כוללים ES5, ES6, ES7, DOM, WebWorker, ScriptHost ועוד.

דוגמה:

            "compilerOptions": {
  "lib": ["ES2020", "DOM"]
}
            

              
                Copy
              
            
          

תצורה זו כוללת הגדרות טיפוסים עבור ECMAScript 2020 וממשק ה-DOM API, החיוני לפרויקטים מבוססי דפדפן.

allowJs

אפשרות זו מאפשרת למהדר TypeScript לקמפל קבצי JavaScript לצד קבצי TypeScript. זה יכול להיות שימושי בעת העברת פרויקט JavaScript ל-TypeScript או בעת עבודה עם בסיסי קוד JavaScript קיימים.

דוגמה:

            "compilerOptions": {
  "allowJs": true
}
            

              
                Copy
              
            
          

כאשר אפשרות זו מופעלת, המהדר יעבד גם קבצי .ts וגם קבצי .js.

checkJs

אפשרות זו מאפשרת בדיקת טיפוסים עבור קבצי JavaScript. בשילוב עם allowJs, היא מאפשרת ל-TypeScript לזהות שגיאות טיפוסים פוטנציאליות בקוד ה-JavaScript שלך.

דוגמה:

            "compilerOptions": {
  "allowJs": true,
  "checkJs": true
}
            

              
                Copy
              
            
          

תצורה זו מספקת בדיקת טיפוסים עבור קבצי TypeScript ו-JavaScript.

jsx

אפשרות זו מציינת כיצד יש להמיר תחביר JSX (המשמש ב-React ובמסגרות אחרות). ערכים נפוצים כוללים preserve, react, react-native ו-react-jsx. preserve משאיר את תחביר ה-JSX כפי שהוא, react הופך אותו לקריאות React.createElement, react-native מיועד לפיתוח React Native, ו-react-jsx הופך אותו לפונקציות factory של JSX. react-jsxdev מיועד למטרות פיתוח.

דוגמה:

            "compilerOptions": {
  "jsx": "react"
}
            

              
                Copy
              
            
          

תצורה זו מתאימה לפרויקטי React, והופכת את JSX לקריאות React.createElement.

declaration

אפשרות זו יוצרת קבצי הצהרה (.d.ts) עבור קוד ה-TypeScript שלך. קבצי הצהרה מספקים מידע טיפוסים עבור הקוד שלך, ומאפשרים לפרויקטי TypeScript אחרים או לפרויקטי JavaScript להשתמש בקוד שלך עם בדיקת טיפוסים נכונה.

דוגמה:

            "compilerOptions": {
  "declaration": true
}
            

              
                Copy
              
            
          

תצורה זו תיצור קבצי .d.ts לצד קבצי ה-JavaScript המהודרים.

declarationMap

אפשרות זו יוצרת קבצי source map (.d.ts.map) עבור קבצי ההצהרה שנוצרו. קבצי source map מאפשרים למנפי באגים ולכלים אחרים למפות בחזרה לקוד המקור של TypeScript בעת עבודה עם קבצי ההצהרה.

דוגמה:

            "compilerOptions": {
  "declaration": true,
  "declarationMap": true
}
            

              
                Copy
              
            
          

sourceMap

אפשרות זו יוצרת קבצי source map (.js.map) עבור קוד ה-JavaScript המהודר. קבצי source map מאפשרים למנפי באגים ולכלים אחרים למפות בחזרה לקוד המקור של TypeScript בעת ניפוי באגים בדפדפן או בסביבות אחרות.

דוגמה:

            "compilerOptions": {
  "sourceMap": true
}
            

              
                Copy
              
            
          

outFile

אפשרות זו משלבת ופולטת את כל קבצי הפלט לקובץ יחיד. זה משמש בדרך כלל לאגוד קוד עבור יישומים מבוססי דפדפן.

דוגמה:

            "compilerOptions": {
  "outFile": "dist/bundle.js"
}
            

              
                Copy
              
            
          

outDir

אפשרות זו מציינת את ספריית הפלט עבור קבצי ה-JavaScript המהודרים. אם לא צוין, המהדר יציב את קבצי הפלט באותה ספרייה כמו קבצי המקור.

דוגמה:

            "compilerOptions": {
  "outDir": "dist"
}
            

              
                Copy
              
            
          

תצורה זו תציב את קבצי ה-JavaScript המהודרים בספריית ה-dist.

rootDir

אפשרות זו מציינת את ספריית השורש של פרויקט TypeScript. המהדר משתמש בספרייה זו כדי לפתור שמות מודולים וליצור נתיבי קבצי פלט. זה שימושי במיוחד עבור מבני פרויקטים מורכבים.

דוגמה:

            "compilerOptions": {
  "rootDir": "src"
}
            

              
                Copy
              
            
          

removeComments

אפשרות זו מסירה הערות מקוד ה-JavaScript המהודר. זה יכול לעזור להקטין את גודל קבצי הפלט.

דוגמה:

            "compilerOptions": {
  "removeComments": true
}
            

              
                Copy
              
            
          

noEmitOnError

אפשרות זו מונעת מהמהדר לפלוט קבצי JavaScript אם מזוהות שגיאות טיפוסים כלשהן. זה מבטיח שרק קוד חוקי ייווצר.

דוגמה:

            "compilerOptions": {
  "noEmitOnError": true
}
            

              
                Copy
              
            
          

strict

אפשרות זו מאפשרת את כל אפשרויות בדיקת הטיפוסים המחמירות. מומלץ מאוד לפרויקטים חדשים מכיוון שהוא עוזר לזהות שגיאות פוטנציאליות ולאכוף שיטות עבודה מומלצות.

דוגמה:

            "compilerOptions": {
  "strict": true
}
            

              
                Copy
              
            
          

הפעלת מצב קפדני שווה להפעלת האפשרויות הבאות:

• noImplicitAny
• noImplicitThis
• alwaysStrict
• strictNullChecks
• strictFunctionTypes
• strictBindCallApply
• noImplicitReturns
• noFallthroughCasesInSwitch

esModuleInterop

אפשרות זו מאפשרת יכולת פעולה הדדית בין מודולי CommonJS ו-ES. זה מאפשר לך לייבא מודולי CommonJS במודולי ES ולהיפך.

דוגמה:

            "compilerOptions": {
  "esModuleInterop": true
}
            

              
                Copy
              
            
          

forceConsistentCasingInFileNames

אפשרות זו אוכפת רישיות עקבית בשמות קבצים. זה חשוב לתאימות בין פלטפורמות, מכיוון שמערכות הפעלה מסוימות רגישות לאותיות רישיות בעוד שאחרות אינן כאלה.

דוגמה:

            "compilerOptions": {
  "forceConsistentCasingInFileNames": true
}
            

              
                Copy
              
            
          

baseUrl ו-paths

אפשרויות אלה מאפשרות לך להגדיר פתרון מודולים. baseUrl מציין את ספריית הבסיס לפתרון שמות מודולים שאינם יחסיים, ו-paths מאפשר לך להגדיר כינויים מותאמים אישית למודולים.

דוגמה:

            "compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@components/*": ["src/components/*"],
    "@utils/*": ["src/utils/*"]
  }
}
            

              
                Copy
              
            
          

תצורה זו מאפשרת לך לייבא מודולים באמצעות כינויים כמו @components/MyComponent ו-@utils/myFunction.

תצורה מתקדמת: מעבר לבסיס

כעת, בואו נחקור כמה אפשרויות tsconfig.json מתקדמות שיכולות לשפר עוד יותר את חוויית הפיתוח שלך ב-TypeScript.

קומפילציה מצטברת

TypeScript תומך בקומפילציה מצטברת, שיכולה להאיץ משמעותית את תהליך הבנייה עבור פרויקטים גדולים. כדי להפעיל קומפילציה מצטברת, הגדר את האפשרות incremental ל-true וציין אפשרות tsBuildInfoFile.

דוגמה:

            "compilerOptions": {
  "incremental": true,
  "tsBuildInfoFile": ".tsbuildinfo"
}
            

              
                Copy
              
            
          

האפשרות tsBuildInfoFile מציינת את הקובץ שבו המהדר יאחסן את מידע הבנייה. מידע זה משמש כדי לקבוע אילו קבצים יש לקמפל מחדש במהלך בנייות עוקבות.

הפניות לפרויקטים

הפניות לפרויקטים מאפשרות לך לבנות את הקוד שלך לפרויקטים קטנים וקלים יותר לניהול. זה יכול לשפר את זמני הבנייה ואת ארגון הקוד עבור בסיסי קוד גדולים. אנלוגיה טובה לתפיסה זו היא של ארכיטקטורת מיקרו-שירותים - כל שירות עצמאי, אך מסתמך על האחרים במערכת האקולוגית.

כדי להשתמש בהפניות לפרויקטים, עליך ליצור קובץ tsconfig.json נפרד עבור כל פרויקט. לאחר מכן, בקובץ tsconfig.json הראשי, אתה יכול לציין את הפרויקטים שאליהם יש להתייחס באמצעות האפשרות references.

דוגמה:

            {
  "compilerOptions": {
    ...
  },
  "references": [
    { "path": "./project1" },
    { "path": "./project2" }
  ]
}
            

              
                Copy
              
            
          

תצורה זו מציינת שהפרויקט הנוכחי תלוי בפרויקטים הממוקמים בספריות ./project1 ו-./project2.

Transformations מותאמות אישית

Transformations מותאמות אישית מאפשרות לך לשנות את הפלט של מהדר TypeScript. זה יכול לשמש למגוון מטרות, כגון הוספת המרות קוד מותאמות אישית, הסרת קוד לא בשימוש או אופטימיזציה של הפלט עבור סביבות ספציפיות. הם משמשים בדרך כלל למשימות בינאום ולוקליזציה של i18n.

כדי להשתמש ב-transformations מותאמות אישית, עליך ליצור קובץ JavaScript נפרד שמייצא פונקציה שתקרא על ידי המהדר. לאחר מכן, אתה יכול לציין את קובץ ה-transformation באמצעות האפשרות plugins בקובץ tsconfig.json.

דוגמה:

            {
  "compilerOptions": {
    ...
    "plugins": [
      { "transform": "./transformer.js" }
    ]
  }
}
            

              
                Copy
              
            
          

תצורה זו מציינת שיש להשתמש בקובץ ./transformer.js כ-transformation מותאם אישית.

קבצים, כולל, ואל תכלול

מעבר ל-compilerOptions, אפשרויות אחרות ברמת השורש ב-tsconfig.json שולטות באילו קבצים נכללים בתהליך הקומפילציה:

• קבצים: מערך של נתיבי קבצים שיש לכלול בקומפילציה.
• כולל: מערך של דפוסי glob המציינים קבצים שיש לכלול.
• אל תכלול: מערך של דפוסי glob המציינים קבצים שיש להחריג.

אפשרויות אלה מספקות שליטה מפורטת באילו קבצים מעובדים על ידי מהדר TypeScript. לדוגמה, אתה יכול להחריג קבצי בדיקה או קוד שנוצר מתהליך הקומפילציה.

דוגמה:

            {
  "compilerOptions": { ... },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "**/*.spec.ts"]
}
            

              
                Copy
              
            
          

תצורה זו כוללת את כל הקבצים בספריית src ותתי הספריות שלה, תוך החרגת קבצים בספריות node_modules ו-dist, כמו גם כל קובץ עם הסיומת .spec.ts (משמש בדרך כלל לבדיקות יחידה).

אפשרויות קומפילציה לתרחישים ספציפיים

פרויקטים שונים עשויים לדרוש הגדרות קומפילציה שונות כדי להשיג תוצאות מיטביות. בואו נסתכל על כמה תרחישים ספציפיים והגדרות הקומפילציה המומלצות עבור כל אחד מהם.

פיתוח יישומי אינטרנט

עבור פיתוח יישומי אינטרנט, בדרך כלל תרצה להשתמש בהגדרות הקומפילציה הבאות:

            {
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
            

              
                Copy
              
            
          

הגדרות אלה מתאימות ליישומי אינטרנט מודרניים המשתמשים ב-React או במסגרות דומות אחרות. הם מכוונים לתכונות ECMAScript האחרונות, משתמשים במודולי ES ומאפשרים בדיקת טיפוסים קפדנית.

פיתוח Backend של Node.js

עבור פיתוח Backend של Node.js, בדרך כלל תרצה להשתמש בהגדרות הקומפילציה הבאות:

            {
  "compilerOptions": {
    "target": "ESNext",
    "module": "CommonJS",
    "esModuleInterop": true,
    "strict": true,
    "sourceMap": true,
    "outDir": "dist",
    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
            

              
                Copy
              
            
          

הגדרות אלה מתאימות ליישומי Node.js המשתמשים במערכת המודולים CommonJS. הם מכוונים לתכונות ECMAScript האחרונות, מאפשרים בדיקת טיפוסים קפדנית ומאפשרים לך לייבא קבצי JSON כמודולים.

פיתוח ספריות

עבור פיתוח ספריות, בדרך כלל תרצה להשתמש בהגדרות הקומפילציה הבאות:

            {
  "compilerOptions": {
    "target": "ES5",
    "module": "UMD",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}
            

              
                Copy
              
            
          

הגדרות אלה מתאימות ליצירת ספריות שניתן להשתמש בהן בסביבות דפדפן ו-Node.js. הם יוצרים קבצי הצהרה ו-source maps לחוויית מפתח משופרת.

שיטות עבודה מומלצות לניהול TSConfig

הנה כמה שיטות עבודה מומלצות שכדאי לזכור בעת ניהול קבצי ה-tsconfig.json שלך:

• התחל בתצורה בסיסית: צור קובץ tsconfig.json בסיסי עם הגדרות נפוצות ולאחר מכן הרחב אותו בפרויקטים אחרים באמצעות האפשרות extends.
• השתמש במצב קפדני: הפעל מצב קפדני כדי לזהות שגיאות פוטנציאליות ולאכוף שיטות עבודה מומלצות.
• הגדר פתרון מודולים: הגדר כראוי פתרון מודולים כדי להימנע משגיאות ייבוא.
• השתמש בהפניות לפרויקטים: בנה את הקוד שלך לפרויקטים קטנים וקלים יותר לניהול באמצעות הפניות לפרויקטים.
• שמור על קובץ ה-tsconfig.json שלך מעודכן: בדוק את קובץ ה-tsconfig.json שלך באופן קבוע ועדכן אותו ככל שהפרויקט שלך מתפתח.
• בצע בקרת גרסאות על קובץ ה-tsconfig.json שלך: בצע commit של קובץ ה-tsconfig.json שלך לבקרת גרסאות יחד עם קוד המקור האחר שלך.
• תעד את התצורה שלך: הוסף הערות לקובץ ה-tsconfig.json שלך כדי להסביר את המטרה של כל אפשרות.

מסקנה: שליטה בתצורת TypeScript

קובץ ה-tsconfig.json הוא כלי רב עוצמה להגדרת מהדר TypeScript ושליטה בתהליך הבנייה. על ידי הבנת האפשרויות הזמינות ויישום שיטות עבודה מומלצות, אתה יכול לכוונן את פרויקטי ה-TypeScript שלך לביצועים, תחזוקה ותאימות מיטביים. מדריך זה סיפק סקירה מקיפה של האפשרויות המתקדמות הזמינות בקובץ ה-tsconfig.json, והעצים אותך להשתלט באופן מלא על זרימת העבודה של פיתוח TypeScript שלך. זכור להתייעץ תמיד עם התיעוד הרשמי של TypeScript לקבלת המידע וההדרכה העדכניים ביותר. ככל שהפרויקטים שלך מתפתחים, כך גם ההבנה והניצול שלך בכלי תצורה חזקים אלה צריכים להיות. קידוד שמח!